<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      layout:decorate="layout">
<head th:include="common::common"></head>
<!--<%@ include file="include/title.jsp" %>-->
<link th:href="@{/res/plugins/datepicker/datepicker3.css}" rel="stylesheet"/>
<link th:href="@{/res/plugins/validator/bootstrapValidator.min.css}" rel="stylesheet"/>
<link th:href="@{/res/lobibox/lobibox.css}" rel="stylesheet"/>
<link th:href="@{/css/home/home.css}" rel="stylesheet"/>
<link th:href="@{/res/bootstrap-wysiwyg-2.0-dev/css/style.css}" rel="stylesheet"/>
<style>
    .cell {
        height: 500px;
        vertical-align: middle;
        display: inline-block;
        line-height: 500px;
    }
</style>
</head>

<div class="wrapper">
        <section class="content">
            <div class="row">
                <div id="hidden_pw" style="visibility:hidden;">
                <h2 style="text-align: center;">网证平台第三方接入信息统计表</h2>
                <div class="col-xs-12">
                    <!-- 查询、添加、批量删除、导出、刷新 -->
                    <div class="row-fluid">
                        <div class="pull-right">
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary btn-sm"  id="btn-add">
                                    <i class="fa fa-plus"></i> 添加
                                </button>
                                <!--<button type="button" class="btn btn-primary btn-sm" id="btn-re">-->
                                    <!--<i class="fa fa-refresh"></i> 刷新-->
                                <!--</button>-->
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-12">
                            <div class="box">
                                <div class="box-body">
                                    <table id="dataTable" class="table table-striped table-bordered table-hover table-condensed" align="center">
                                        <thead>
                                        <tr class="info">
                                            <!-- <td><input type="checkbox" id="checkAll"></td> -->
                                            <th>序号</th>
                                            <th>调用者</th>
                                            <th>联系人</th>
                                            <!--<th>需求</th>-->
                                            <th>模式</th>
                                            <th>开始日期</th>
                                            <th>结束日期</th>
                                            <!--<th>提出的问题及回答</th>-->
                                            <!--<th>遇到的问题</th>-->
                                            <th>备注</th>
                                            <th>操作</th>
                                        </tr>
                                        </thead>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                </div>
            </div>
        </section>

        <div class="row">
            <div class="window col-xs-12">
                <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <form id="hiddenForm">
                            <input type="hidden" name="id">
                            <input type="hidden" name="invoker">
                            <input type="hidden" name="contacts">
                            <input type="hidden" name="need">
                            <input type="hidden" name="pattern">
                            <input type="hidden" name="startDate">
                            <input type="hidden" name="endDate">
                            <input type="hidden" name="questionAndAnswer">
                            <input type="hidden" name="question">
                            <input type="hidden" name="remark">
                        </form>
                        <form class="form-horizontal" id="editForm" action="/item/save" autocomplete="off">
                            <div class="modal-content">
                                <div class="modal-header bg-blue" style="background-color: #307095;">
                                    <button type="button" class="close" data-dismiss="modal">
                                        <span aria-hidden="true">&times;</span><span class="sr-only"></span>
                                    </button>
                                    <h4 class="modal-title cyrillic-ext" id="myModalLabel">编辑</h4>
                                </div>

                                <div class="modal-body">
                                    <input type="hidden" name="id">
                                    <div class="form-group">
                                        <label class="col-xs-3 control-label">调用者</label>
                                        <div class="col-xs-8">
                                            <input type="text" class="form-control" placeholder="输入调用者" name="invoker">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-xs-3 control-label">联系人</label>
                                        <div class="col-xs-8">
                                            <input type="text" class="form-control" placeholder="请输入联系人" name="contacts">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-xs-3 control-label">需求</label>
                                        <div class="col-xs-8">
                                            <input type="text" class="form-control" placeholder="请输入需求" name="need">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-xs-3 control-label">模式</label>
                                        <div class="col-xs-8">
                                            <input type="text" class="form-control" placeholder="请输入模式" name="pattern">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-xs-3 control-label">开始日期</label>
                                        <div class="col-xs-8">
                                            <input type="text" class="form-control form_datetime" placeholder="选择日期" name="startDate" id="startDate" readonly>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-xs-3 control-label">结束日期</label>
                                        <div class="col-xs-8">
                                            <input type="text" class="form-control form_datetime" placeholder="选择日期" name="endDate" id="endDate" readonly>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-xs-3 control-label">提出的问题及回答</label>
                                        <div class="col-xs-8">
                                            <!--<textarea class="form-control" rows="7" name="questionAndAnswer" id="questionAndAnswer"></textarea>-->
                                            <textarea style="width:600px;height:300px;visibility:hidden;" name="questionAndAnswer" id="questionAndAnswer" ></textarea>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-xs-3 control-label">遇到的问题</label>
                                        <div class="col-xs-8">
                                            <!--<textarea class="form-control" rows="7" name="question" id="question"></textarea>-->
                                            <textarea style="width:600px;height:300px;visibility:hidden;" name="question" id="question" ></textarea>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-xs-3 control-label">备注</label>
                                        <div class="col-xs-8">
                                            <input type="text" class="form-control" placeholder="请输入备注" name="remark">
                                        </div>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <a name="submit" id="btn-submit" class="btn btn-primary">提交</a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    <div class="row">
        <div class="window col-xs-12">
            <div class="modal fade" id="showModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog" id="showDiv">
                    <div class="modal-content">
                        <div class="modal-header bg-blue" style="background-color: #307095;">
                            <button type="button" class="close" data-dismiss="modal">
                                <span aria-hidden="true">&times;</span><span class="sr-only"></span>
                            </button>
                            <h4 class="modal-title cyrillic-ext" id="myModalLabel">内容</h4>
                        </div>
                        <div class="modal-body" id="showBody">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="control-sidebar-bg"></div>
</div>

<script th:src="@{/res/dist/js/app.min.js}" type="text/javascript"></script>
<script th:src="@{/res/laydate/laydate.js}" type="text/javascript"></script>
<script th:src="@{/res/plugins/datepicker/bootstrap-datepicker.js}" type="text/javascript"></script>
<script th:src="@{/res/plugins/datepicker/bootstrap-datetimepicker.zh-CN.js}" type="text/javascript"></script>
<script th:src="@{/res/plugins/validator/bootstrapValidator.min.js}" type="text/javascript"></script>
<script th:src="@{/js/site.js}" type="text/javascript"></script>
<script th:src="@{/js/base64.js}" type="text/javascript"></script>
<script th:src="@{/res/kindeditor-4.1.4/kindeditor-all-min.js}" type="text/javascript"></script>
<script th:src="@{/res/kindeditor-4.1.4/lang/zh_CN.js}" type="text/javascript"></script>
<script th:src="@{/res/echarts.min.js}" type="text/javascript"></script>
<script th:src="@{/res/bootstrap-wysiwyg-2.0-dev/js/bootstrap-wysiwyg.min.js}" type="text/javascript"></script>
<script>
    $(function () {
        swal({
                title: "PASSWORD",
                text: "Please enter password",
                type: "input",
                showCancelButton: true,
                closeOnConfirm: false,
                animation: "slide-from-top",
                inputPlaceholder: ""
            },
            function(inputValue){
                if (inputValue === false) returnfalse;

                if (inputValue === "") {
                    swal.showInputError("NO");
                    return false
                }
                if (inputValue == '321') {
                    swal({
                        title: "OK",
                        //text: "2秒后自动关闭。",
                        type: 'success',
                        timer: 1000,
                        showConfirmButton: false
                    });
                    $('#hidden_pw').removeAttr('style');
                } else {
                    swal.showInputError("NO");
                }
            });
        var qaaEditor;
        KindEditor.ready(function(K) {
            qaaEditor =  window.editor = K.create('#questionAndAnswer', {
                langType : 'zh_CN',
                // 提交的参数名称，后台接收此参数
                filePostName  : "uploadPicture",
                imageSizeLimit: '5MB',
                mageUploadLimit: 5,
                // 文件上传路径
                uploadJson : path + '/pic/upload',
                afterBlur: function () {
                    this.sync();
                }, // 不加此属性，表单提交时无法获取文本域中的内容
                afterFocus: function() {
                    // 失去焦点后激活按钮
                    //$('#editForm').bootstrapValidator('disableSubmitButtons', false);
                }
            });
        });
        var qEditor
        KindEditor.ready(function(K) {
            qEditor =  window.editor = K.create('#question', {
                langType : 'zh_CN',
                // 提交的参数名称，后台接收此参数
                filePostName  : "uploadPicture",
                imageSizeLimit: '5MB',
                mageUploadLimit: 5,
                // 文件上传路径
                uploadJson : path + '/pic/upload',
                afterBlur: function () {
                    this.sync();
                }, // 不加此属性，表单提交时无法获取文本域中的内容
                afterFocus: function() {
                    // 失去焦点后激活按钮
                    //$('#editForm').bootstrapValidator('disableSubmitButtons', false);
                }
            });
        });

        var tables = $("#dataTable").dataTable({
            serverSide: true,// 分页，取数据等等的都放到服务端去
            processing: true,// 载入数据的时候是否显示“载入中”
            pageLength: 10,  // 首次加载的数据条数
            ordering: false,// 排序操作在服务端进行，所以可以关了。
            pagingType: "full_numbers",
            autoWidth: false,
            stateSave: true,// 保持翻页状态，和tables.fnDraw(false);结合使用
            searching: false,
            scrollX: true,			// 横向滚动条
            //scrollY: "350px",			// 纵向滚动条
            ajax: {   // 类似jquery的ajax参数，基本都可以用。
                type: "GET",// 后台指定了方式，默认get，外加datatable默认构造的参数很长，有可能超过get的最大长度。
                url: path + "/item/list",
                dataSrc: "data",// 默认data，也可以写其他的，格式化table的时候取里面的数据
                data: function (d) {// d是原始的发送给服务器的数据，默认很长。
                    var param = {}; // 因为服务端排序，可以新建一个参数对象
                    param.pageIndex = d.start;
                    param.pageSize = 10;
                    var formData = $("#queryForm").serializeArray();// 把form里面的数据序列化成数组
                    formData.forEach(function (e) {
                        param[e.name] = e.value;
                    });
                    return param;// 自定义需要传递的参数。
                },
            },
            columns: [// 对应上面thead里面的序列
                 {"data": null},
                {"data": 'invoker',
                    'render': function (data) {
                        return data == null ? '' : base64Decoder(data)
                    }
                },
                {"data": 'contacts',
                    'render': function (data) {
                        return data == null ? '' : base64Decoder(data)
                    }},
                /*{"data": 'need',
                    'render': function (data) {
                        return data == null ? '' : base64Decoder(data)
                    }},*/
                {"data": 'pattern',
                    'render': function (data) {
                        return data == null ? '' : base64Decoder(data)
                    }},
                {"data": 'startDate'},
                {"data": 'endDate'},
                /*{"data": 'questionAndAnswer',
                    'render': function (data) {
                        return data == null ? '' : base64Decoder(data)
                    }},
                {"data": 'question',
                    'render': function (data) {
                        return data == null ? '' : base64Decoder(data)
                    }},*/
                {"data": 'remark',
                    'render': function (data) {
                        return data == null ? '' : base64Decoder(data)
                    }},
                {"data": null,"width":"100px"}
            ],
            // 操作按钮
            columnDefs: [
                {
                    targets: -1,// 编辑
                    data: null,// 下面这行，添加了编辑按钮和删除按钮
                    defaultContent:
                    " <div class='btn-group'>"+
                    "<p><a id='contentRow' href='javascript:void(0)'>详细</a> "+
                    "<a id='editRow' href='javascript:void(0)'>编辑</a> "+
                    "<a id='delRow' href='javascript:void(0)'>删除</a></p></div>"
                }
            ],
            // 在每次table被draw完后调用
            fnDrawCallback: function(){
                var api = this.api();
                // 获取到本页开始的条数
                var startIndex= api.context[0]._iDisplayStart;
                api.column(0).nodes().each(function(cell, i) {
                    cell.innerHTML = startIndex + i + 1;
                });
            },
            language: {
                lengthMenu: "",// 不显示记录条数选择
                processing: "加载中...",// 处理页面数据的时候的显示
                paginate: {// 分页的样式文本内容。
                    previous: "<",
                    next: ">",
                    first: "<<",
                    last: ">>"
                },
                zeroRecords: "无数据",// table tbody 内容为空时，tbody的内容。
                info: "第_START_-_END_条,共 _TOTAL_ 条,共_PAGES_ 页",
                infoEmpty: "无数据",// 筛选为空时左下角的显示。0条记录
                infoFiltered: "",	// 筛选之后的左下角筛选提示(另一个是分页信息显示，在上面的info中已经设置，所以可以不显示)，
                sSearch: "关键字：",
            }
        });

        $("#startDate").datepicker({
            format: 'yyyy-mm-dd',
            minView:'hour',
            language: 'zh-CN',
            autoclose:true,
            //startDate:new Date(), // 显示从本月往后
            endDate: new Date(),
            todayHighlight: true,	// 高亮显示今天
            todayBtn: "linked", //如果此值为true 或 "linked"，则在日期时间选择器组件的底部显示一个 "Today" 按钮用以选择当前日期。如果是true的话，"Today" 按钮仅仅将视图转到当天的日期，如果是"linked"，当天日期将会被选中。
            clearBtn: true
        });
        $("#endDate").datepicker({
            format: 'yyyy-mm-dd',
            minView:'hour',
            language: 'zh-CN',
            autoclose:true,
            //startDate:new Date(), // 显示从本月往后
            endDate: new Date(),
            todayHighlight: true,	// 高亮显示今天
            todayBtn: "linked", //如果此值为true 或 "linked"，则在日期时间选择器组件的底部显示一个 "Today" 按钮用以选择当前日期。如果是true的话，"Today" 按钮仅仅将视图转到当天的日期，如果是"linked"，当天日期将会被选中。
            clearBtn: true
        });

        $("#btn-add").on("click", function () {
            qaaEditor.html('');
            qEditor.html('');
            resetForm();
            url = path + "/item/save";
            $('#editModal').modal('show');
        });

        $("#btn-submit").on("click", function(){
            preParam(qaaEditor, qEditor);
            $.ajax({
                cache: false,
                url: url,
                type: "POST",
                data: $('#hiddenForm').serialize(),
                success: function(result) {
                    if (result.status == 200) {
                        $("#editModal").modal("hide");
                        swal({
                            title: "添加成功",
                            //text: "2秒后自动关闭。",
                            type: 'success',
                            timer: 1000,
                            showConfirmButton: false
                        });
                        tables.fnDraw(false);
                    } else {
                        swal({
                            title: "添加失败",
                            //text: "2秒后自动关闭。",
                            type: 'error',
                            timer: 1000,
                            showConfirmButton: false
                        });
                    }
                },
                error: function () {
                    alert('error');
                }
            });
        });

        $('#dataTable tbody').on( 'click', '#delRow', function () {
            var data = tables.api().row($(this).parents('tr')).data();
            swal({
                    title: "确定删除吗？",
                    text: "你将无法恢复数据！",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "确定",
                    cancelButtonText: "放弃",
                    closeOnConfirm: false
                },
                function(){
                    $.ajax({
                        url: '/item/del/' + data.id,
                        type: 'DELETE',
                        success: function (result) {
                            if (result.status == 200) {
                                swal({
                                    title: "删除成功",
                                    //text: "2秒后自动关闭。",
                                    type: 'success',
                                    timer: 1000,
                                    showConfirmButton: false
                                });
                                tables.api().row().remove().draw(false);
                            }
                        }
                    });
                });
        });

        $('#dataTable tbody').on( 'click', '#contentRow', function () {
            $('#showBody').empty();
            var data = tables.api().row($(this).parents('tr')).data();
            var itemId = data.id;
            $.ajax({
                url: '/item/get/' + itemId,
                type: 'GET',
                success: function (result) {
                    var item = result.data;
                    if (result.status == 200) {
                        var table = '<table class="table table-striped table-bordered table-hover table-condensed>"' +
                            '<tr><td><strong>需求</strong></td><td>'+base64Decoder(item.need)+'</td><tr>' +
                            '<tr><td><strong>提出的问题及回答</strong></td><td>'+base64Decoder(item.questionAndAnswer)+'</td><tr>' +
                            '<tr><td><strong>遇到的问题</strong></td><td>'+base64Decoder(item.question)+'</td><tr>' +
                            '</table>';
                        $('#showBody').append(table);
                    }
                }
            });
            $('#showModal').modal('show');
        });

        $('#dataTable tbody').on('click', '#editRow', function () {
            qaaEditor.html('');
            qEditor.html('');
            resetForm();
            url = '/item/update';
            var data = tables.api().row($(this).parents('tr')).data();
            var itemId = data.id;
            $.ajax({
                url: '/item/get/' + itemId,
                type: 'GET',
                success: function (result) {
                    var item = result.data;
                    if (result.status == 200) {
                        var item = result.data;
                        $('#hiddenForm input[name=id]').val(itemId);
                        $('#editForm input[name=invoker]').val(base64Decoder(item.invoker));
                        $('#editForm input[name=contacts]').val(base64Decoder(item.contacts));
                        $('#editForm input[name=need]').val(base64Decoder(item.need));
                        $('#editForm input[name=pattern]').val(base64Decoder(item.pattern));
                        $('#editForm input[name=startDate]').val(item.startDate);
                        $('#editForm input[name=endDate]').val(item.endDate);
                        qaaEditor.html(base64Decoder(item.questionAndAnswer));
                        qEditor.html(base64Decoder(item.question));
//                        $('#editForm textarea[name=questionAndAnswer]').val(base64Decoder(item.questionAndAnswer));
//                        $('#editForm textarea[name=question]').val(base64Decoder(item.question));
                        $('#editForm input[name=remark]').val(base64Decoder(item.remark));
                        $('#editModal').modal('show');
                    }
                }
            });
        });
    });

    function preParam(e1, e2) {
        var invoker = $('#editForm input[name=invoker]').val();
        var contacts = $('#editForm input[name=contacts]').val();
        var need = $('#editForm input[name=need]').val();
        var pattern = $('#editForm input[name=pattern]').val();
        var startDate = $('#editForm input[name=startDate]').val();
        var endDate = $('#editForm input[name=endDate]').val();
        var questionAndAnswer = e1.html();
        var question = e2.html();
//        var questionAndAnswer = $('#editForm textarea[name=questionAndAnswer]').val();
//        var question = $('#editForm textarea[name=question]').val();
        var remark = $('#editForm input[name=remark]').val();

        invoker = BASE64.encoder(invoker);
        contacts = BASE64.encoder(contacts);
        need = BASE64.encoder(need);
        pattern = BASE64.encoder(pattern);
        questionAndAnswer = BASE64.encoder(questionAndAnswer);
        question = BASE64.encoder(question);
        remark = BASE64.encoder(remark);

        $('#hiddenForm input[name=invoker]').val(invoker);
        $('#hiddenForm input[name=contacts]').val(contacts);
        $('#hiddenForm input[name=need]').val(need);
        $('#hiddenForm input[name=pattern]').val(pattern);
        $('#hiddenForm input[name=startDate]').val(startDate);
        $('#hiddenForm input[name=endDate]').val(endDate);
        $('#hiddenForm input[name=questionAndAnswer]').val(questionAndAnswer);
        $('#hiddenForm input[name=question]').val(question);
        $('#hiddenForm input[name=remark]').val(remark);
    }

    function resetForm() {
        $('#editForm')[0].reset();
        $('#hiddenForm input[name=id]').val('');
        $('#hiddenForm input[name=invoker]').val('');
        $('#hiddenForm input[name=contacts]').val('');
        $('#hiddenForm input[name=need]').val('');
        $('#hiddenForm input[name=pattern]').val('');
        $('#hiddenForm input[name=startDate]').val('');
        $('#hiddenForm input[name=endDate]').val('');
        $('#hiddenForm input[name=questionAndAnswer]').val('');
        $('#hiddenForm input[name=question]').val('');
        $('#hiddenForm input[name=remark]').val('');
    }
</script>
</body>
</html>
